<template>
	<view class="navbar" :style="{'position':isFixed?'fixed':'sticky'}">
		<view class="placeholder background" :style="{height: phoneInfo.statusBarHeight + 5  + 'px'}"></view>
		<view class="background" :style="{'opacity':isOpacity != false ? opacity :''}"></view>
		<view class="navbar-wrap background">

			<view class="avatar" @tap='avatarTap' v-if="avatar">
				<image :src="avatar" mode="aspectFill"></image>
				<image
					src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e395c07f-e828-4cfe-8b2e-ff0349a240ef/c1986167-06f9-42d1-ac99-d508a85151df.jpg"
					mode="aspectFill"></image>
			</view>
			<view class="back-arrow" v-if="isBack" @tap='pageBack'></view>
			<view class="title">{{title}}</view>
			<view class="opBtn">
				<slot name="opBtn"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//标题
			title: {
				type: String,
				default: ""
			},
			//是否需要返回按钮
			isBack: {
				type: Boolean,
				default: false
			},
			//头像
			avatar: {
				type: String,
				default: ''
			},
			//是否需要透明度
			isOpacity: {
				type: Boolean,
				default: false
			},
			//传入的透明度
			opacity: {
				type: Number,
				default: 0
			},
			isFixed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		computed: {
			phoneInfo() {
				// console.log(this.$store.state.phoneInfo)
				return this.$store.state.phoneInfo
			}
		},
		mounted() {
			// console.log('组件挂载了', this.$store.state.phoneInfo)
		},
		watch: {
			phoneInfo(val) {
				// console.log('变化了', val)
			}
		},
		methods: {
			avatarTap() {
				uni.$emit('avatarTap')
			},
			pageBack() {
				console.log('6666')
				uni.navigateBack({
					delta: 1,
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.background {
		height: 100%;
		width: 100%;
		// border: 1px solid;
		background-image: linear-gradient(to right, #59cf5d, #f9f96d);
	}

	.navbar {
		top: 0;
		left: 0;
		right: 0;
		position: sticky;
		z-index: 9999;
	}

	.navbar-wrap {
		height: 90rpx;
		width: 100%;
		// border: 1px solid;
		// position: fixed;

		// border: 2px solid red;

		.title {
			font-size: 34rpx;
			// border: 1px solid;
			position: absolute;
			width: 300rpx;
			bottom: 20rpx;
			left: 50%;
			margin-left: -150rpx;
			color: #FFFFFF;
			text-align: center;

		}

		.avatar {
			width: 90rpx;
			height: 90rpx;
			// border: 1px solid;
			border-radius: 50%;
			overflow: hidden;
			position: absolute;
			bottom: 10rpx;
			left: 30rpx;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.back-arrow {
			border-top: 2px solid #FFFFFF;
			border-left: 2px solid #FFFFFF;
			height: 25rpx;
			width: 25rpx;
			position: absolute;
			left: 30rpx;
			bottom: 30rpx;
			transform: rotateZ(-45deg);
		}

		.opBtn {
			// border: 1px solid;
			position: absolute;
			right: 30rpx;
			bottom: 15rpx;
			max-width: 200rpx;
		}
	}
</style>
